<template>
	<view class="medicine-search-container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<input class="search-input" placeholder="输入药名/条码/公司搜索药品" placeholder-class="placeholder-style" />
			<image class="search-icon" src="/static/search.png" mode="aspectFit"></image>
		</view>

		<!-- 列表 -->
		<view class="search-results">
			<view class="medicine-item" v-for="(item, index) in medicineList" :key="index" @click="showPopup">
				<image :src="item.img" mode="" style="width: 100%;height: 240rpx;"></image>
				<view class="medicine-info">
					<view class="">
						<text class="medicine-name">{{item.name}}</text>
						<text class="medicine-company">规格：{{item.spec}}</text>
					</view>
					<view class="medicine-price">¥{{item.price}}</view>
				</view>
			</view>
		</view>
		<uni-popup ref="orderPopup" type="bottom" :mask-click="false" v-if="show" @click="showcha">
			<view class="order-modal">
				<view class="goshop">
					<view style="display: flex;">
						<image src="/static/00.png" mode="" style="height: 240rpx;width: 260rpx;"></image>
						<view style="margin-left: 40rpx;">
							<view style="font-weight: bold;font-size: 40rpx;color: #ff4d00;">￥10</view>
							<view style="margin-top: 5rpx;">库存 227 件</view>
							<uv-number-box v-model="value" @change="valChange" style="margin-top: 10rpx;"></uv-number-box>
						</view>
					</view>
					<image src="/static/Shoucang.png" style="width: 50rpx;height: 50rpx;"></image>
				</view>
				<view class="modal-section">
					<text class="section-title"><text style="margin-left: 20rpx;">收款信息</text></text>
					<view style="display: flex;justify-content: space-between;">
						<view class="address-info">
							<text class="info-item"><text class="info-label">姓名 </text>19188888888</text>
							<text class="info-item">xxxx省 xxx市 xx区 xxx街道 xxx号</text>
						</view>
						<view style="margin-top: 20rpx;color: #07c160;font-size: 46rpx;">></view>
					</view>
		
				</view>
		
				<view class="divider"></view>
		
				<view class="modal-footer">
					<view class="total-price">
						<text>合计：</text>
						<text class="price">¥{{currentMedicine.totalPrice}}</text>
					</view>
					<button class="submit-btn" @click="submitOrder">提交订单</button>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const value = ref(0)

	const valChange = (e) => {
		console.log('当前值为: ' + e.value)
	}
	
	const show=ref(false)
	const showPopup = () => {
		show.value = true
	}
	const showcha=()=>{
		show.value = false
	}
</script>

<script>
	export default {
		data() {
			return {
				searchKeyword: '阿司匹林',
				currentMedicine: {
					name: '',
					price: '',
					stock: 0,
					totalPrice: 0
				},
				medicineList: [{
						name: '阿司匹林',
						spec: '0.2g',
						img: '/static/00.png',
						price: '10.00',
						stock: 227,
						totalPrice: '30.0'
					},
					{
						name: '阿司匹林',
						spec: '0.2g',
						img: '/static/00.png',
						price: '10.00',
						stock: 227,
						totalPrice: '30.0'
					},
					{
						name: '阿司匹林',
						spec: '0.2g',
						img: '/static/00.png',
						price: '10.00',
						stock: 227,
						totalPrice: '30.0'
					},
					{
						name: '阿司匹林',
						spec: '0.2g',
						img: '/static/00.png',
						price: '10.00',
						stock: 227,
						totalPrice: '30.0'
					},
				]
			}
		},
		methods: {
			showOrderModal(item) {
				this.currentMedicine = {
					...item
				};
				this.$refs.orderPopup.open();
			},
			submitOrder() {
				// 提交订单逻辑
				uni.showToast({
					title: '订单提交成功',
					icon: 'success'
				});
				this.$refs.orderPopup.close();
			}
		}
	}
</script>

<style>
	.medicine-search-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-bar {
		position: relative;
		margin-bottom: 30rpx;
		box-shadow: 0 0 20rpx rgba(0, 190, 0, 0.5);
	}

	.search-input {
		height: 80rpx;
		padding: 0 80rpx 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 28rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.placeholder-style {
		color: #999;
	}

	.search-icon {
		position: absolute;
		right: 30rpx;
		top: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.search-results {
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 100rpx;
	}

	.medicine-item {
		width: 40%;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 25rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 0 20rpx rgba(0, 190, 0, 0.5);
	}

	.medicine-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.medicine-name {
		font-size: 28rpx;
		display: block;
		margin-bottom: 10rpx;
	}

	.medicine-spec {
		font-size: 26rpx;
		font-weight: bold;
		color: #666;
		display: block;
		margin-bottom: 5rpx;
	}

	.medicine-company {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.medicine-price {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #f76260;
		font-weight: bold;
	}

	/* 订单弹窗样式 */
	.order-modal {
		width: 100%;
		background-color: #fff;
		/* border-radius: 24rpx 24rpx 0 0; */
		/* border-top-right-radius: 20rpx; */
		/* border-top-left-radius: 20rpx; */
		padding: 0 30rpx;
		padding: 50rpx;
		position: absolute;
		bottom: 0;
	}

	.modal-section {
		width: 85%;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		color: #757575;
		margin-bottom: 20rpx;
		border-left: #00ff06 solid 10rpx;
	}

	.goshop {
		width: 85%;
		display: flex;
		justify-content: space-between;
		border-radius: 12rpx;
		font-weight: bold;
		padding: 20rpx;
	}

	.info-item {
		display: block;
		font-size: 28rpx;
		line-height: 1.8;
	}

	.info-label {
		font-weight: bold;
		color: #333;
		margin-right: 20rpx;
	}

	.divider {
		height: 1rpx;
		background-color: #07c160;
		margin: 30rpx 0;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 200rpx;
	}

	.total-price {
		font-size: 32rpx;
		font-weight: bold;
	}

	.price {
		font-weight: bold;
		color: #f76260;
	}

	.submit-btn {
		background-color: #07c160;
		color: #fff;
		border-radius: 20rpx;
		padding: 0 50rpx;
		height: 100rpx;
		font-weight: bold;
		line-height: 100rpx;
		font-size: 38rpx;
		background-color: #ff3c3c;
	}
</style>